<!-- 告警分析环形图 -->

<template>
  <div class="alarm-analysis">
    <div ref="alarmChart" class="alarm-chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'AlarmAnalysis',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      // 监听窗口大小变化，自适应调整图表
      window.addEventListener('resize', this.handleResize)
    })
  },
  beforeDestroy() {
    // 组件销毁前清理图表实例和事件监听
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  methods: {
    initChart() {
      // 初始化图表实例
      this.chart = echarts.init(this.$refs.alarmChart)
      
      // 环形图配置选项
      const option = {
        
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          top: '8%',
          textStyle: {
            color: '#666',
            fontSize: 11
          },
          formatter: function(name) {
            return name
          }
        },
        series: [
          {
            name: '来源类型',
            type: 'pie',
            radius: ['25%', '45%'], // 内外半径，形成环形，进一步缩小
            center: ['50%', '52%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: '{b}\n{c} ({d}%)',
              fontSize: 10
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              {
                value: 15,
                name: '电参异常',
                itemStyle: {
                  color: '#409EFF'
                }
              },
              {
                value: 25,
                name: '报警窗口',
                itemStyle: {
                  color: '#E6A23C'
                }
              },
              {
                value: 35,
                name: '故障事件',
                itemStyle: {
                  color: '#F56C6C'
                }
              },
              {
                value: 25,
                name: '温度异常',
                itemStyle: {
                  color: '#67C23A'
                }
              }
            ]
          }
        ]
      }
      
      // 设置配置项并渲染图表
      this.chart.setOption(option)
    },
    handleResize() {
      // 窗口大小改变时重新调整图表大小
      if (this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>

<style scoped>
.alarm-analysis {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alarm-chart {
  width: 100%;
  height: 100%;
  min-height: 0;
}
</style>

